<script setup>
  const props = defineProps({
    // class长度
    classHeight: {
      type: String,
      default: 'wh_726',
    },
    // 是否显示头部
    showHeader: {
      type: Boolean,
      default: false,
    },
    title:{
      type: String,
      default: ''
    }
  });
</script>

<template>
  <!-- 外层边框 -->
  <view class="borderChinese" :class="classHeight">
    <view class="icon hW_63 flex align-center justify-center" style="padding: 0 20rpx"  v-if="showHeader">
      {{title}}
    </view>
    <view class="outerBorder" :class="classHeight">
      <view class="upperLeft bg_FFEDC7"></view>
      <view class="upperRight bg_FFEDC7"></view>
      <view class="content flex flex-column align-center">
        <slot name="default"></slot>
      </view>
      <view class="lowerLeft bg_FFEDC7"></view>
      <view class="lowerRight bg_FFEDC7"></view>
    </view>
  </view>
</template>

<style scoped lang="scss">
  .borderChinese {
    position: relative;
  }

  .icon {
    position: absolute;
    top: -20rpx;
    left: 50%;
    transform: translate(-50%, 0);
    background: url($uni-bg-url-sq + '/chineseSurname/sq_surname_icon.png') no-repeat;
    background-size: 100% 63rpx;
    z-index: 2;
    font-weight: 500;
    font-size: 36rpx;
    color: #4B4B4B;
  }

  .outerBorder {
    overflow: hidden;
    position: relative;

    .upperLeft {
      width: 22rpx;
      height: 22rpx;
      position: absolute;
      border: 2rpx solid #DBB485;
      border-radius: 50%;
      top: -11rpx;
      left: -11rpx;
      z-index: 1;
    }

    .upperRight {
      width: 22rpx;
      height: 22rpx;
      position: absolute;
      border: 2rpx solid #DBB485;
      border-radius: 50%;
      top: -11rpx;
      right: -11rpx;
      z-index: 1;
    }

    .content {
      border: 2rpx solid #DBB485;
    }

    .lowerLeft {
      width: 22rpx;
      height: 22rpx;
      position: absolute;
      border: 2rpx solid #DBB485;
      border-radius: 50%;
      bottom: -11rpx;
      left: -11rpx;
      z-index: 1;
    }

    .lowerRight {
      width: 22rpx;
      height: 22rpx;
      position: absolute;
      border: 2rpx solid #DBB485;
      border-radius: 50%;
      bottom: -11rpx;
      right: -11rpx;
      z-index: 1;
    }
  }
</style>